<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>精美的多级侧边栏导航菜单jQuery插件|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
	<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
	<link rel="stylesheet" href="dist/sidebar-menu.css">
	<style type="text/css">
	.main-sidebar{
	    position: absolute;
	    top: 0;
	    left: 0;
	    height: 100%;
	    min-height: 100%;
	    width: 230px;
	    z-index: 810;
	    background-color: #222d32;
	 }
	</style>
	<!--[if IE]>
		<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>
<body>
	<aside class="main-sidebar">
	<section  class="sidebar">
	    <ul class="sidebar-menu">
	      <li class="header">MAIN NAVIGATION</li>
	      <li class="treeview">
	        <a href="#">
	          <i class="fa fa-dashboard"></i> <span>Dashboard</span> <i class="fa fa-angle-left pull-right"></i>
	        </a>
	        <ul class="treeview-menu">
	          <li><a href="#"><i class="fa fa-circle-o"></i> Dashboard v1</a></li>
	          <li><a href="#"><i class="fa fa-circle-o"></i> Dashboard v2</a></li>
	        </ul>
	      </li>
	      <li class="treeview">
	        <a href="#">
	          <i class="fa fa-files-o"></i>
	          <span>Layout Options</span>
	          <span class="label label-primary pull-right">4</span>
	        </a>
	        <ul class="treeview-menu" style="display: none;">
	          <li><a href="#"><i class="fa fa-circle-o"></i> Top Navigation</a></li>
	          <li><a href="#"><i class="fa fa-circle-o"></i> Boxed</a></li>
	          <li><a href="#"><i class="fa fa-circle-o"></i> Fixed</a></li>
	          <li class=""><a href="#"><i class="fa fa-circle-o"></i> Collapsed Sidebar</a>
	          </li>
	        </ul>
	      </li>
	      <li>
	        <a href="#">
	          <i class="fa fa-th"></i> <span>Widgets</span>
	          <small class="label pull-right label-info">new</small>
	        </a>
	      </li>
	      <li class="treeview">
	        <a href="#">
	          <i class="fa fa-pie-chart"></i>
	          <span>Charts</span>
	          <i class="fa fa-angle-left pull-right"></i>
	        </a>
	        <ul class="treeview-menu">
	          <li><a href="#"><i class="fa fa-circle-o"></i> ChartJS</a></li>
	          <li><a href="#"><i class="fa fa-circle-o"></i> Morris</a></li>
	          <li><a href="#"><i class="fa fa-circle-o"></i> Flot</a></li>
	          <li><a href="#"><i class="fa fa-circle-o"></i> Inline charts</a></li>
	        </ul>
	      </li>
	      <li class="treeview">
	        <a href="#">
	          <i class="fa fa-laptop"></i>
	          <span>UI Elements</span>
	          <i class="fa fa-angle-left pull-right"></i>
	        </a>
	        <ul class="treeview-menu">
	          <li><a href="#"><i class="fa fa-circle-o"></i> General</a></li>
	          <li><a href="#"><i class="fa fa-circle-o"></i> Icons</a></li>
	          <li><a href="#"><i class="fa fa-circle-o"></i> Buttons</a></li>
	          <li><a href="#"><i class="fa fa-circle-o"></i> Sliders</a></li>
	          <li><a href="#"><i class="fa fa-circle-o"></i> Timeline</a></li>
	          <li><a href="#"><i class="fa fa-circle-o"></i> Modals</a></li>
	        </ul>
	      </li>
	      <li class="treeview">
	        <a href="#">
	          <i class="fa fa-edit"></i> <span>Forms</span>
	          <i class="fa fa-angle-left pull-right"></i>
	        </a>
	        <ul class="treeview-menu">
	          <li><a href="#"><i class="fa fa-circle-o"></i> General Elements</a></li>
	          <li><a href="#"><i class="fa fa-circle-o"></i> Advanced Elements</a></li>
	          <li><a href="#"><i class="fa fa-circle-o"></i> Editors</a></li>
	        </ul>
	      </li>
	      <li class="treeview">
	        <a href="#">
	          <i class="fa fa-table"></i> <span>Tables</span>
	          <i class="fa fa-angle-left pull-right"></i>
	        </a>
	        <ul class="treeview-menu">
	          <li><a href="#"><i class="fa fa-circle-o"></i> Simple tables</a></li>
	          <li><a href="#"><i class="fa fa-circle-o"></i> Data tables</a></li>
	        </ul>
	      </li>
	      <li>
	        <a href="#">
	          <i class="fa fa-calendar"></i> <span>Calendar</span>
	          <small class="label pull-right label-danger">3</small>
	        </a>
	      </li>
	      <li>
	        <a href="#">
	          <i class="fa fa-envelope"></i> <span>Mailbox</span>
	          <small class="label pull-right label-warning">12</small>
	        </a>
	      </li>
	      <li class="treeview">
	        <a href="#">
	          <i class="fa fa-folder"></i> <span>Examples</span>
	          <i class="fa fa-angle-left pull-right"></i>
	        </a>
	        <ul class="treeview-menu">
	          <li><a href="#"><i class="fa fa-circle-o"></i> Invoice</a></li>
	          <li><a href="#"><i class="fa fa-circle-o"></i> Profile</a></li>
	          <li><a href="#"><i class="fa fa-circle-o"></i> Login</a></li>
	          <li><a href="#"><i class="fa fa-circle-o"></i> Register</a></li>
	          <li><a href="#"><i class="fa fa-circle-o"></i> Lockscreen</a></li>
	          <li><a href="#"><i class="fa fa-circle-o"></i> 404 Error</a></li>
	          <li><a href="#"><i class="fa fa-circle-o"></i> 500 Error</a></li>
	          <li><a href="#"><i class="fa fa-circle-o"></i> Blank Page</a></li>
	          <li><a href="#"><i class="fa fa-circle-o"></i> Pace Page</a></li>
	        </ul>
	      </li>
	      <li class="treeview">
	        <a href="#">
	          <i class="fa fa-share"></i> <span>Multilevel</span>
	          <i class="fa fa-angle-left pull-right"></i>
	        </a>
	        <ul class="treeview-menu">
	          <li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
	          <li>
	            <a href="#"><i class="fa fa-circle-o"></i> Level One <i class="fa fa-angle-left pull-right"></i></a>
	            <ul class="treeview-menu">
	              <li><a href="#"><i class="fa fa-circle-o"></i> Level Two</a></li>
	              <li>
	                <a href="#"><i class="fa fa-circle-o"></i> Level Two <i class="fa fa-angle-left pull-right"></i></a>
	                <ul class="treeview-menu">
	                  <li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
	                  <li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
	                </ul>
	              </li>
	            </ul>
	          </li>
	          <li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
	        </ul>
	      </li>
	      <li><a href="#"><i class="fa fa-book"></i> <span>Documentation</span></a></li>
	      <li class="header">LABELS</li>
	      <li><a href="#"><i class="fa fa-circle-o text-red"></i> <span>Important</span></a></li>
	      <li><a href="#"><i class="fa fa-circle-o text-yellow"></i> <span>Warning</span></a></li>
	      <li><a href="#"><i class="fa fa-circle-o text-aqua"></i> <span>Information</span></a></li>
	    </ul>
	  </section>
	 </aside>
	<div class="htmleaf-container">
		<header class="htmleaf-header">
			<h1>精美的多级侧边栏导航菜单jQuery插件 <span>A Stylish Multi-level Sidebar Menu Plugin With jQuery</span></h1>
			<div class="htmleaf-links">
				<a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"><span> jQuery之家</span></a>
				<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.htmleaf.com/jQuery/Menu-Navigation/201607063693.html" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
			</div>
		</header>
		<div class="htmleaf-content">

		</div>
		<div class="related">
		    <h3>如果你喜欢这个插件，那么你可能也喜欢:</h3>
		    <a href="http://www.htmleaf.com/jQuery/Menu-Navigation/201602013094.html">
			  <img src="related/1.jpg" width="300" alt="tuxedo-menu.js-实用的jQuery侧边栏菜单插件"/>
			  <h3>tuxedo-menu.js-实用的jQuery侧边栏菜单插件</h3>
			</a>
			<a href="http://www.htmleaf.com/jQuery/Menu-Navigation/201602233137.html">
			  <img src="related/2.jpg" width="300" alt="cbFlyout-响应式jQuery多级隐藏侧边栏菜单插件"/>
			  <h3>cbFlyout-响应式jQuery多级隐藏侧边栏菜单插件</h3>
			</a>
		</div>
	</div>

	<script src="http://libs.useso.com/js/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
	<script>window.jQuery || document.write('<script src="js/jquery-2.1.1.min.js"><\/script>')</script>
	<script src="./dist/sidebar-menu.js"></script>
	  <script>
	    $.sidebarMenu($('.sidebar-menu'))
	  </script>
</body>
</html>
